<template>
  <div class="app-container"
  >
    <template>
      <div v-if="!isBlank">
        <el-form :model="form" ref="form" label-width="80px">
          <template v-for="(item, index) in form.formItemList">
            <el-row :key="index">
              <el-form-item label-width="200px"
                            :prop="item.type == 4 ? 'formItemList.' + index + '.richText' :'formItemList.' + index + '.value'"
                            :label="item.title"
                            :required="item.required == '1'"
                            :rules="item.required==='1'?[{required: true, message: item.title+ '不能为空',
                                  //2字典项
                                  trigger: item.type == 2? 'change':['blur','change'] }]:[]"
              >
                <!--                                <span v-if="item.remark" slot="label">-->
                <!--                                  <el-tooltip :content="item.remark">-->
                <!--                                  <i class="el-icon-question"></i>-->
                <!--                                  </el-tooltip>-->
                <!--                                  {{ item.title }}-->
                <!--                                </span>-->
                <el-col>
                  <el-col :span="12">
                    <!--              富文本-->
                    <editor v-if="item.type == 4" v-model="item.richText" placeholder="请输入字段值"
                            :min-height="188"/>
                    <!--              图片-->
                    <ImageUpload v-else-if="item.type == 3" :limit="1" v-model="item.value"></ImageUpload>
                    <!--              视频-->
                    <FileUpload v-else-if="item.type == 5" :limit="1" :fileType="['mp4']"
                                v-model="item.value"></FileUpload>
                    <!--              字典-->
                    <dict-select v-else-if="item.type == 2" :dict-type="item.dictType" v-model="item.value"
                                 :multiple="item.multiple == '1'"
                    />
                    <el-input type="number" v-else-if="item.type == 1" v-model="item.value"
                              placeholder="请输入字段值">
                      <template v-if="'元'" slot="append">元</template>
                    </el-input>
                    <el-input v-else v-model="item.value" placeholder="请输入字段值">
                      <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                    </el-input>
                  </el-col>
                  <el-col :span="24">
                    <span v-if="item.remark" style="font-size: 12px;">{{ item.remark }}</span>
                  </el-col>


                </el-col>
              </el-form-item>
            </el-row>
          </template>
        </el-form>
        <div>
          <div style="text-align: center">
            <el-button type="primary" @click="submitForm">{{$t('ok')}}</el-button>
          </div>
        </div>
      </div>
      <div v-else>
        <h4>暂无平台参数信息，请前往平台参数配置添加配置项</h4>
      </div>
    </template>
  </div>
</template>

<script>
import {batchUpdatePlatformConfig, listConfigByGroup} from "@/api/setting/ platformConfig";
import DictTag from "@/components/DictTag/index.vue";
import MultipleDictTag from "@/components/DictTag/MultipleDictTag.vue";
import DictSelect from "@/components/DictSelect/index.vue";


export default {
  name: "ValueSetting",
  components: {DictSelect, MultipleDictTag, DictTag},
  dicts: ['plat_form_group'],
  props: {
    groupId: {
      required: true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        formItemList: [],
      },
      //是否有表单信息
      isBlank: true,
      activeName: null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询平台参数配置列表 */
    async getList() {
      this.$modal.loading("正在读取配置表单...");
      const rsp = await listConfigByGroup(this.groupId)
      if (rsp && rsp.data) {
        this.form.formItemList = rsp.data;
        this.isBlank = !rsp.data.length
      }
      this.$modal.closeLoading()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        value: null,
        richText: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          const data = {data: [...this.form.formItemList]}
          this.$modal.loading("正在提交配置信息...");
          await batchUpdatePlatformConfig(data)
          this.$modal.closeLoading()
          this.$modal.msgSuccess("配置成功");
          this.open = false;
        }
      })
    },
  },
};
</script>
